<template>
	<view class="container" style="padding-bottom: 100rpx;">
		<view style="display: flex;flex-direction: row;padding: 20rpx;background-color: #FFF;">
			<view class="headImgView">
				<u-image width="140rpx" height="140rpx" radius="10rpx" :src="itemModel.coverUrl"></u-image>
			</view>
			<view style="margin-left: 16rpx;width: 550rpx;">
				<!-- <view class="name limitLineNumOfTwo" v-if="itemModel.name">{{itemModel.name}}</view> -->
				<u--textarea placeholder="请输入" border="surround" height='40' v-model="itemModel.name"></u--textarea>
				<view style="margin-top: 8rpx;color: #999;">销量：{{itemModel.sales}}</view>
				<!-- <view style="margin-top: 16rpx;color: #FC5E53;">¥{{itemModel.sellingPrice}}</view> -->
			</view>
		</view>
		<view style="padding: 20rpx;background-color: #FFF;margin-top: 10rpx;">
			<view class="">基础信息设置</view>
			<view style="display: flex;flex-direction: row;margin-top: 16rpx;align-items: center;">
				<view>是否上架：</view>
				<view style="width: 200rpx;margin-left: 16rpx;">
					<u-switch v-model="itemModel.status" size="28" ></u-switch>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx;background-color: #FFF;margin-top: 10rpx;">
			<view class="">规格值设置</view>
			<view class="sku_content">
				<view class="item_content" v-for="(item, index) in specList" :key='index'>
					<view class="title">{{item.specName}}</view>
					<view class="content">
						<view class="default"
							v-for="(spec, index2) in item.specValueList" :key='index2'>
							<u--input @focus='inputfocus(index, index2)' @blur='inputblur(index, index2)' placeholder="请输入" border="surround" v-model="spec.name"></u--input>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx;background-color: #FFF;margin-top: 10rpx;">
			<view class="">规格设置</view>
			<view v-for="(sku, index) in itemModel.skuList" :key='index' v-if='sku.is_delete==0'
			style="display: flex;flex-direction: row;padding: 20rpx;background-color: #FFF;border-bottom: 1px solid #eeeeee;">
				<view class="headImgView">
					<u-image width="140rpx" height="140rpx" radius="10rpx" :src="sku.coverUrl"></u-image>
				</view>
				<view style="margin-left: 16rpx;width: 550rpx;">
					<view class="name limitLineNumOfOne" style="color: #999;display: flex;flex-direction: row;justify-content: space-between;">
						<text>{{sku.specValuesText}}</text>
						<text @click="deleteSkuAction(sku)" style="margin-left: 16rpx;color: #999;">删除</text>
					</view>
					<view style="color: #999;">进货总价：¥{{sku.costPrice}}</view>
					<view style="display: flex;flex-direction: row;margin-top: 8rpx;">
						设置库存：
						<uni-number-box v-model="sku.stock" :min="1" :max="999999" @change="payCountChange"></uni-number-box>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 16rpx;align-items: center;">
						<view>零售价（元）：</view>
						<view style="width: 200rpx;margin-left: 16rpx;">
							<u--input placeholder="请输入" border="surround" v-model="sku.sellingPrice" type='number'></u--input>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="safeArea" style="margin-top: 20rpx;display: flex;flex-direction: column;">
			<!-- 保存按钮 -->
			<view style="width: 670rpx;margin-left: 40rpx;" @click="saveClick"><u-button type="primary" text="保存"></u-button></view>
			<view style="width: 670rpx;margin-left: 40rpx;margin-top: 20rpx;" @click="deleteClick"><u-button type="info" text="删除"></u-button></view>
		</view>
	</view>
</template>

<script>
	import { product } from '@/api/product.js'
	export default{
		components: { },
		data() {
			return {
				itemModel: {},
				formModel: {},
				specList: [],
				currentSpec: {}
			}
		},
		onLoad() {
			this.productId = this.$Route.query.productId
			this.getItemInfo()
		},
		methods:{
			// 规格值输入框获取焦点
			inputfocus(index, index2){
				var specName = this.specList[index].specName
				this.currentSpec.specName = this.specList[index].specName
				var specValueList = this.specList[index].specValueList
				this.currentSpec.name = specValueList[index2].name
				
			},
			// 规格值输入框失去焦点
			inputblur(index, index2){
				var specValueList = this.specList[index].specValueList
				var currentName = specValueList[index2].name
				
				this.itemModel.skuList.forEach((item, index)=>{
					var specValues = JSON.parse(item.specValues)
					for(var value of specValues){
						if(value.specName == this.currentSpec.specName && value.name == this.currentSpec.name){
							value.name = currentName
							item.specValues = JSON.stringify(specValues)
							item.specValuesText = this.$tools.getSpecs(item.specValues)
							return
						}
					}
				})
			},
			// 删除规格
			deleteSkuAction(sku){
				sku.is_delete=1
				// this.itemModel.skuList.splice(index, 1)
			},
			//获取item信息
			getItemInfo() {
				product.getProductInfo({productId: this.productId}).then(res => {
					if(res.data.code == 10000){
						var itemModel = res.data.data
						if(itemModel.status){
							itemModel.status = true
						}else{
							itemModel.status = false
						}
						this.itemModel = itemModel
						this.findSpecList(this.itemModel.skuList)
					}
				})
			},
			// 数量改变
			payCountChange(){
				console.log('数量改变')
				// this.countMoney()
			},
			saveClick(){
				if(this.itemModel.status){
					this.itemModel.status = 1
				}else{
					this.itemModel.status = 0
				}
				product.setProduct({
					productId: this.itemModel.id,
					name: this.itemModel.name,
					status: this.itemModel.status,
					skuList: this.itemModel.skuList
				}).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack()
					}
				})
			},
			deleteClick(){
				var _this = this
				uni.showModal({
					content: '确认删除',
					confirmText: '是',
					cancelText: '否',
					success(res) {
						if(res.confirm){
							product.deleteProduct({
								obj_ids: [_this.itemModel.id],
							}).then(res => {
								if(res.data.code == 10000){
									uni.navigateBack()
									_this.$show.showMessage('删除成功')
								}
							})
						}
					}
				})
			},
			//获取sku列表
			findSpecList(skuList) {
				//组装规格名称
				var valueList = []
				var specNames = new Set()
				for(var item of skuList){
					for(var value of JSON.parse(item.specValues)){
						specNames.add(value.specName)
						valueList.push(value)
					}
				}
				//组装规格
				var specList = []
				var specs_sel = ''
				for(var specName of specNames){
					var sku = {}
					var specSet = new Set()
					for(var item of valueList){
						if(specName == item.specName){
							specSet.add(item.name)
						}
					}
					sku.specName = specName
					//组装规格值
					var specListTemp = Array.from(specSet)
					console.log('specListTemp', specListTemp)
					var specValueList = []
					for(var i in specListTemp){
						var name = specListTemp[i]
						var spec = {}
						spec.specName = specName
						spec.name = name
						spec.select = false
						//设置默认选中的规格
						// for(var sel of JSON.parse(this.itemModel.defaultSku.specValues)){
						// 	if(sel.name == name){
						// 		spec.select = true
						// 		specs_sel = specs_sel + name + '，'
						// 	}
						// }
						specValueList.push(spec)
					}
					sku.specValueList = specValueList
					specList.push(sku)
				}
				this.specList = specList
			},
		}
	}
</script>

<style scoped lang="scss">
	.sku_content {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	
		.item_content {
			display: flex;
			flex-direction: column;
			margin-bottom:20rpx;
	
			.title {
				color: #333333;
				font-weight: bold;
			}
	
			.content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
	
				.default {
					margin: 20rpx 0;
					margin-right: 30rpx;
					width: 300rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
				}
	
				.spec {
					background-color: #EEEEEE;
					border: #EEEEEE 1px solid;
				}
	
				.spec_sel {
					background-color: #fefefe;
					border: #FC5E53 1px solid;
					color: #FC5E53 !important;
				}
			}
		}
	}
</style>
